<template>
  <div class="box">
    <van-search placeholder="请输入搜索关键词" v-model="value" disabled @click="navTo('/search')" />
    <div class="line"></div>
    <van-tree-select height="100vh" :items="items" :main-active-index.sync="activeIndex">
      <template slot="content">
        <div class="right">
          <img :src="child.theme" class="title_img" />
          <van-divider :style="{ color: '#999', borderColor: '#ddd', padding: '.2rem .1rem 0' }">全部分类</van-divider>
          <div class="class_box">
            <div class="class_item" v-for="item in child.list" :key="item.id">
              <img :src="item.icon_img" class="class_icon" @click="navTo('/good_list',item)" />
              <span>{{item.name}}</span>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>
 
<script>
import { mixins } from "@/utils/mixins";
export default {
  mixins: [mixins],
  data() {
    return {
      activeIndex: 0,
      items: [],
      value: "",
      child: []
    };
  },
  watch: {
    activeIndex() {
      this.getChild();
    }
  },
  mounted() {
    this.getPage();
  },
  methods: {
    async getPage() {
      const res = await this.$api.goodsApi.goodClass();
      const list = res.data.data.map(item => ({
        text: item.name,
        id: item.id
      }));
      this.items = list;
      this.getChild();
    },
    async getChild() {
      const list = this.items;
      const id = list[this.activeIndex].id;
      const res = await this.$api.goodsApi.goodChildClass({ id });
      this.child = res.data.data;
    }
  }
};
</script>

<style lang="less" scoped>
.van-sidebar-item--select {
  border-color: #3963bc;
}
.right {
  width: 100%;
  padding: 0.16rem;
  display: flex;
  flex-direction: column;
}
.title_img {
  width: 100%;
  height: 2rem;
  background-color: #eee;
}
.line {
  width: 100%;
  height: 1px;
  background-color: #f4f7ff;
}
.van-divider {
  margin: 0.1rem 0;
}
.class_box {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  padding-bottom: 0.3rem;
  .class_item {
    margin-top: 0.3rem;
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .class_icon {
      width: 1rem;
      height: 1rem;
      // background-color: #eee;
    }
  }
}
</style>